<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator="/" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">首页</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">首页</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>
    <div class="main_box">
      <div class="common_Box">
        <div class="title_box">
          <div class="blue_radio"></div>
          <div class="title">后台常用功能</div>
        </div>
        <div class="app_box">
          <div @click="getTo(item.url)" class="app" v-for="(item, index) in commonList" :key="index">

            <a href="#">
              <img :src="item.icon" alt="">
            </a>
            <span> {{ item.name }}</span>
          </div>
        </div>

      </div>
      <div class="visualization_Box">
        <div class="title_box">
          <div class="blue_radio"></div>
          <div class="title">数据可视化</div>
        </div>
        <div class="app_box">
          <div v-for="(item, index) in visualizationList" :key="index">
            <div class="app">

              <a href="">

                <img :src="item.icon" alt="">
              </a>
              <span> {{ item.name }}</span>
              <el-switch class="open" @change="changeStatus(item.id)" v-model="item.isUse" active-color="#13ce66" inactive-color="#cccccc" :active-value="0" :inactive-value="1">
              </el-switch>
            </div>
          </div>
        </div>

      </div>
      <div class="visualization_Box">
        <div class="title_box">
          <div class="blue_radio"></div>
          <div class="title">App(超级管理员)</div>
        </div>
        <div class="app_box">
          <div v-for="(item, index) in visualizationList1" :key="index">
            <div class="app">

              <a href="">

                <img :src="item.icon" alt="">
              </a>
              <span> {{ item.name }}</span>
              <el-switch class="open" @change="changeStatus1(item.id)" v-model="item.isUse" active-color="#13ce66" inactive-color="#cccccc" :active-value="0" :inactive-value="1">
              </el-switch>
            </div>
          </div>
        </div>

      </div>
      <div class="visualization_Box">
        <div class="title_box">
          <div class="blue_radio"></div>
          <div class="title">App(老师)</div>
        </div>
        <div class="app_box">
          <div v-for="(item, index) in visualizationList2" :key="index">
            <div class="app">

              <a href="">

                <img :src="item.icon" alt="">
              </a>
              <span> {{ item.name }}</span>
              <el-switch class="open" @change="changeStatus1(item.id)" v-model="item.isUse" active-color="#13ce66" inactive-color="#cccccc" :active-value="0" :inactive-value="1">
              </el-switch>
            </div>
          </div>
        </div>

      </div>
      <div class="visualization_Box">
        <div class="title_box">
          <div class="blue_radio"></div>
          <div class="title">App(学生)</div>
        </div>
        <div class="app_box">
          <div v-for="(item, index) in visualizationList3" :key="index">
            <div class="app">
              <a href="">
                <img :src="item.icon" alt="">
              </a>
              <span> {{ item.name }}</span>
              <el-switch class="open" @change="changeStatus1(item.id)" v-model="item.isUse" active-color="#13ce66" inactive-color="#cccccc" :active-value="0" :inactive-value="1">
              </el-switch>
            </div>
          </div>
        </div>

      </div>
      <div class="allAPP_Box"></div>
    </div>
  </div>
</template>
<script>
import { getUserOneRoleMenus, getSysScreenRoles, saveSysScreenRole, getSysAppRoles, saveSysAppRole } from '@/api/system'

export default {
  components: {},
  // 表格数据
  data() {
    return {
      visualizationList1: [],
      visualizationList2: [],
      visualizationList3: [],
      commonList: [
        { name: '企业概况', src: require('@/assets/ipad/qiye2(21).png') },
        { name: '采集数据', src: require('@/assets/ipad/qiye2@2x(22).png') },
        { name: '销售数据', src: require('@/assets/ipad/qiye2(23).png') },
        { name: '库存数据', src: require('@/assets/ipad/qiye2@2x(24).png') },
        { name: '鱼池监控', src: require('@/assets/ipad/qiye2(25).png') },
        { name: '物流车量', src: require('@/assets/ipad/qiye2(26).png') },
        { name: '企业官网', src: require('@/assets/ipad/qiye2(27).png') },
        { name: '数据驾驶舱', src: require('@/assets/ipad/qiye2(28).png'), url: 'http://60.163.198.70:81/xunyu_iot_screen/#/./?companyId=' + 1 + '&baseId=' + 1 + '&Authorization=' + window.localStorage.getItem('token') }
      ],

      visualizationList: [
        { name: '企业概况', src: require('@/assets/ipad/qiye2(21).png') },
        { name: '采集数据', src: require('@/assets/ipad/qiye2@2x(22).png') },
        { name: '销售数据', src: require('@/assets/ipad/qiye2(23).png') },
        { name: '库存数据', src: require('@/assets/ipad/qiye2@2x(24).png') },
        { name: '鱼池监控', src: require('@/assets/ipad/qiye2(25).png') },
        { name: '物流车量', src: require('@/assets/ipad/qiye2(26).png') },
        { name: '企业官网', src: require('@/assets/ipad/qiye2(27).png') },
        { name: '数据驾驶舱', src: require('@/assets/ipad/qiye2(28).png'), url: 'http://60.163.198.70:81/xunyu_iot_screen/#/./?companyId=' + 1 + '&baseId=' + 1 + '&Authorization=' + window.localStorage.getItem('token') }
      ],
      productionList: [],
      // 加工管理
      processList: [],
      // 销售管理
      marketList: []
    }
  },
  // 初始化加载
  mounted() {
    this.getUserOneRoleMenus()
    this.getSysScreenRoles()
    this.getSysAppRoles()
    this.getSysAppRoles1()
    this.getSysAppRoles2()
  },
  // 自定义方法
  methods: {
    changeStatus(id) {
      saveSysScreenRole({ id: id }).then((res) => {})
    },
    changeStatus1(id) {
      saveSysAppRole({ id: id }).then((res) => {})
    },
    getUserOneRoleMenus() {
      getUserOneRoleMenus().then((res) => {
        this.commonList = res.data
        this.commonList.map((item) => {
          if (item.name == '考场管理') {
            item.icon = require('@/assets/ipad/qiye2(21).png')
            item.url = '/school/schoolInfo'
          } else if (item.name == '用户管理') {
            item.icon = require('@/assets/ipad/qiye2@2x(22).png')
            item.url = '/user/teacherInfo'
          } else if (item.name == '学习资源') {
            item.icon = require('@/assets/ipad/qiye2(23).png')
            item.url = '/learn/showVideo'
          } else if (item.name == '轮播图') {
            item.url = '/carousel/deviceCarousel'

            item.icon = require('@/assets/ipad/qiye2@2x(24).png')
          } else if (item.name == '网络摄像头') {
            item.url = '/video/videoMonitor'

            item.icon = require('@/assets/ipad/qiye2(25).png')
          } else if (item.name == '设备综合管理') {
            item.url = '/device/deviceClass'

            item.icon = require('@/assets/ipad/qiye2(26).png')
          } else if (item.name == '三维模型') {
            item.url = '/threeDimensional/threeDimensionalModel'

            item.icon = require('@/assets/ipad/qiye2(27).png')
          } else if (item.name == '化工工艺') {
            item.url = '/technology/technologyParamClass'
            item.icon = require('@/assets/ipad/qiye2(28).png')
          } else if (item.name == '能耗监测') {
            item.url = '/energyConsumption/energyConsumptionParam'
            item.icon = require('@/assets/ipad/qiye2@2x.png')
          } else if (item.name == '数据统计') {
            item.url = '/statistic/dataDeviceExperiment'
            item.icon = require('@/assets/ipad/qiye2@2x(1).png')
          } else if (item.name == '数据分析') {
            item.url = '/analysis/dataAnalysisDevice'
            item.icon = require('@/assets/ipad/qiye2@2x(2).png')
          } else if (item.name == '人员定位') {
            item.url = '/personLocation/locationMap'
            item.icon = require('@/assets/ipad/qiye2(3).png')
          } else if (item.name == '系统管理') {
            item.url = '/system/sysRole'
            item.icon = require('@/assets/ipad/qiye2@2x(4).png')
          } else if (item.name == '设备巡检') {
            item.url = '/inspection/inspectionDevice'
            item.icon = require('@/assets/xj.png')
          }
        })
      })
    },
    getSysScreenRoles() {
      getSysScreenRoles().then((res) => {
        this.visualizationList = res.data
        this.visualizationList.map((item, index) => {
          if (item.name == '化工工艺') {
            item.icon = require('@/assets/ipad/qiye2(21).png')
          } else if (item.name == '能耗监测') {
            item.icon = require('@/assets//nh.png')
          } else if (item.name == '人员定位') {
            item.icon = require('@/assets/ipad/qiye2@2x(28).png')
          } else if (item.name == '环保监测') {
            item.icon = require('@/assets/hb.png')
          } else if (item.name == '设备巡检') {
            item.icon = require('@/assets/xj.png')
          } else if (item.name == '门禁') {
            item.icon = require('@/assets/mj.png')
          } else if (item.name == '') {
            this.visualizationList.splice(index)
          }
        })
      })
    },
    getSysAppRoles() {
      getSysAppRoles({ type: 0 }).then((res) => {
        this.visualizationList1 = res.data
        this.visualizationList1.map((item, index) => {
          if (item.name == '化工工艺') {
            item.icon = require('@/assets/ipad/qiye2(21).png')
          } else if (item.name == '能耗数据') {
            item.icon = require('@/assets//nh.png')
          } else if (item.name == '人员定位') {
            item.icon = require('@/assets/ipad/qiye2@2x(28).png')
          } else if (item.name == '环境数据') {
            item.icon = require('@/assets/hb.png')
          } else if (item.name == '巡检报表') {
            item.icon = require('@/assets/xj.png')
          } else if (item.name == '门禁管理') {
            item.icon = require('@/assets/mj.png')
          } else if (item.name == '学习资料') {
            item.icon = require('@/assets/ipad/qiye2@2x(1).png')
          } else if (item.name == '监控视频') {
            item.icon = require('@/assets/ipad/qiye2(25).png')
          } else if (item.name == '实训报告') {
            item.icon = require('@/assets/ipad/qiye2@2x.png')
          } else if (item.name == '实训装置') {
            item.icon = require('@/assets/sxzz.png')
          } else if (item.name == '演示视频') {
            item.icon = require('@/assets/yssp.png')
          } else if (item.name == '设备报警') {
            item.icon = require('@/assets/sbbj.png')
          } else if (item.name == '') {
            this.visualizationList1.splice(index)
          }
        })
      })
    },
    getSysAppRoles1() {
      getSysAppRoles({ type: 1 }).then((res) => {
        this.visualizationList2 = res.data
        this.visualizationList2.map((item, index) => {
          if (item.name == '化工工艺') {
            item.icon = require('@/assets/ipad/qiye2(21).png')
          } else if (item.name == '能耗数据') {
            item.icon = require('@/assets//nh.png')
          } else if (item.name == '人员定位') {
            item.icon = require('@/assets/ipad/qiye2@2x(28).png')
          } else if (item.name == '环境数据') {
            item.icon = require('@/assets/hb.png')
          } else if (item.name == '巡检报表') {
            item.icon = require('@/assets/xj.png')
          } else if (item.name == '门禁管理') {
            item.icon = require('@/assets/mj.png')
          } else if (item.name == '学习资料') {
            item.icon = require('@/assets/ipad/qiye2@2x(1).png')
          } else if (item.name == '监控视频') {
            item.icon = require('@/assets/ipad/qiye2(25).png')
          } else if (item.name == '实训报告') {
            item.icon = require('@/assets/ipad/qiye2@2x.png')
          } else if (item.name == '实训装置') {
            item.icon = require('@/assets/sxzz.png')
          } else if (item.name == '演示视频') {
            item.icon = require('@/assets/yssp.png')
          } else if (item.name == '设备报警') {
            item.icon = require('@/assets/sbbj.png')
          } else if (item.name == '') {
            this.visualizationList2.splice(index)
          }
        })
      })
    },
    getSysAppRoles2() {
      getSysAppRoles({ type: 2 }).then((res) => {
        this.visualizationList3 = res.data
        this.visualizationList3.map((item, index) => {
          if (item.name == '化工工艺') {
            item.icon = require('@/assets/ipad/qiye2(21).png')
          } else if (item.name == '能耗数据') {
            item.icon = require('@/assets//nh.png')
          } else if (item.name == '人员定位') {
            item.icon = require('@/assets/ipad/qiye2@2x(28).png')
          } else if (item.name == '环境数据') {
            item.icon = require('@/assets/hb.png')
          } else if (item.name == '巡检报表') {
            item.icon = require('@/assets/xj.png')
          } else if (item.name == '门禁管理') {
            item.icon = require('@/assets/mj.png')
          } else if (item.name == '学习资料') {
            item.icon = require('@/assets/ipad/qiye2@2x(1).png')
          } else if (item.name == '监控视频') {
            item.icon = require('@/assets/ipad/qiye2(25).png')
          } else if (item.name == '实训报告') {
            item.icon = require('@/assets/ipad/qiye2@2x.png')
          } else if (item.name == '实训装置') {
            item.icon = require('@/assets/sxzz.png')
          } else if (item.name == '演示视频') {
            item.icon = require('@/assets/yssp.png')
          } else if (item.name == '设备报警') {
            item.icon = require('@/assets/sbbj.png')
          } else if (item.name == '') {
            this.visualizationList3.splice(index)
          }
        })
      })
    },
    getTo(url) {
      // let url = 'http://60.163.198.70:81/xunyu_iot_map/#/./?companyId=' + this.searchForm.companyId + "&baseId=" + this.searchForm.baseId + "&Authorization=" + window.localStorage.getItem("token")
      // window.open = url;
      // window.open(`${url}`, '_blank')
      this.$router.push({
        path: `${url}`
      })
    }
  }
}
</script>
<style lang="less" scoped>
.open {
  margin-left: 1.5rem;
}
.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;
  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;
    .main-breadcrumb-home {
      cursor: pointer;
      color: #000000;
      font-size: 1.3rem;
      font-weight: bold;
    }
    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}
span {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.title_box {
  display: flex;
  padding-top: 2rem;
  margin-left: 2rem;
  justify-items: center;

  .blue_radio {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 100%;
    background-color: rgb(69, 179, 248);
    margin-top: 0.5rem;
    margin-right: 0.5rem;
  }

  .title {
    font-size: 1.2rem;
    font-weight: bold;
  }
}

.app_box {
  width: 90%;
  margin-top: 2rem;
  margin-left: 5rem;
  // background-color: aqua;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);

  .app {
    text-align: center;
    display: flex;
    justify-content: center;
    padding-bottom: 1rem;

    display: grid;
    // grid-template-rows: 1fr 1fr;
    align-items: center;
    font-size: 0.5rem;
    img {
      width: 5.5rem;
      height: 5.5rem;
    }
  }
}
</style>